<template>
    <a-row>
        <NoAuthPage v-showNoAuth="'E4-1'" :imgBoxStyle="{height:'40vh',margin:'10px'}"/>
        <div v-userAuth="'E4-1'">
        <a-row class="check">
            <a-col :xs='5' :sm='5' :md='5' :lg='5' :xl='3' style="text-align:center">
                <img 
                    ondragstart="return false"
                    oncontextmenu="return false"
                    alt="image_scan"
                    src='../../../../static/images/GIF/ic_rader.gif' class="gif" v-if="imgsrc == true">
                <img 
                    ondragstart="return false"
                    oncontextmenu="return false"
                    alt="image_scan"
                    src='../../../../static/images/png/ic_radar_02.png' class="gif" v-if="imgsrc == false">
            </a-col>
            <a-col :xs='7' :sm='7' :md='12' :lg='10' :xl='5' style="margin-top:2rem">
                <h2><b>{{$t('Data-check')}}</b></h2>
                <!-- <p>{{$t('Self-recovery')}}：3 object/s</p> -->
            </a-col>
            <a-col :xs='{span:2,offset:2}' :sm='{span:2,offset:2}' :md='{span:2,offset:2}' :lg='{span:2,offset:6}' :xl='{span:2,offset:14}' style="margin-top:2rem">
                <a-button v-userAuth="'E4-2'" type='primary' @click="scan">{{$t('Scan-now')}}</a-button>
            </a-col>
        </a-row>
        <a-row :gutter='8' style="margin:0">
            <p class="val">{{$t('Test-result')}}</p>
            <a-row class="check">
                <a-col :span='8'>
                    <p class='sbody'>PG {{$t('Total')}}（{{$t('Piece')}}）：<span>{{detail.total}}</span></p>
                </a-col>
                <a-col :span='8' >
                    <p class='sbody'>{{$t('Normal')}}PG（{{$t('Piece')}}）：<Span>{{detail.healthy}}</Span></p>
                </a-col>
                <a-col :span='8'>
                    <p class='sbody'>{{$t('Abnormal')}}PG（{{$t('Piece')}}）：<span>{{detail.unhealthy}}</span></p>
                </a-col>
                <a-col :span='8'>
                    <p class='sbody'>{{$t('Pool')}}（{{$t('Piece')}}）：<Span>{{detail.pool_num}}</Span></p>
                </a-col>
                <a-col :span='8'>
                    <p class='sbody'>{{$t('Used-capacity')}}（GiB）：<Span>{{detail.used}}</Span></p>
                </a-col>
            </a-row>
        </a-row>
        </div>
    </a-row>
</template>
<script>
import request from '@/request/request'
import NoAuthPage from '@/components/common/NoAuthPage'

export default {
    name:'cslice',
    components: { NoAuthPage },
    data(){
      return{
          detail:'',
          imgsrc:false
      }
    },
    methods:{
        scan(){
            this.imgsrc = true
            request('get', 'ops/service/ceph/pg').then(res=>{
                this.detail = res.data
                this.imgsrc = false
            })
        }
    },
}
</script>
<style>
.sbody{
    background-color: white;
    padding: .5rem;
    margin:1rem .5rem 0 .5rem
}
.gif{
    width: 70% !important;
}
</style>